<template>
  <div class="dashboard">
    <h1>仪表盘</h1>
    <div class="dashboard-content">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><Document /></el-icon>
                <span>总订单数</span>
              </div>
            </template>
            <div class="card-value">{{ data.totalOrders }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><Calendar /></el-icon>
                <span>今日订单</span>
              </div>
            </template>
            <div class="card-value">{{ data.todayOrders }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><Box /></el-icon>
                <!-- 使用 Box 图标替代 Package -->
                <span>未发货订单</span>
              </div>
            </template>
            <div class="card-value">{{ data.undeliveredOrders }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><ShoppingCart /></el-icon>
                <span>今日销量</span>
              </div>
            </template>
            <div class="card-value">{{ data.todaySales }}</div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 添加图表容器 -->
      <div id="chart" style="width: 100%; height: 400px"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
// 引入 ElementPlus 图标
import { getOrderCountService, getOrderTodayCountService } from "@/api/order";
import {
  getUndeliveredOrdersCountService,
  getSalesTodayCountService,
} from "@/api/orderDetail";

// 模拟数据
const data = ref({
  totalOrders: null,
  todayOrders: null,
  undeliveredOrders: null,
  todaySales: null,
});

// 指定图表的配置项和数据
const option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  xAxis: {
    type: "category",
    data: ["总订单数", "今日订单", "未发货订单", "今日销量"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [
        data.totalOrders,
        data.todayOrders,
        data.undeliveredOrders,
        data.todaySales,
      ],
      type: "line",
      smooth: true,
      itemStyle: {
        color: "#409EFF",
      },
      markPoint: {
        data: [
          { type: "max", name: "最大值" },
          { type: "min", name: "最小值" },
        ],
      },
      markLine: {
        data: [{ type: "average", name: "平均值" }],
      },
    },
  ],
};

onMounted(async () => {
  try {
    // 初始化图表
    const chartDom = document.getElementById("chart");
    const myChart = echarts.init(chartDom);

    // 获取总订单数
    let totalOrders = await getOrderCountService();
    data.totalOrders = totalOrders.data;
    // 获取今日订单数
    let todayOrderResult = await getOrderTodayCountService();
    data.todayOrders = todayOrderResult.data;
    // 获取未发货订单数
    let undeliveredOrdersResult = await getUndeliveredOrdersCountService();
    data.undeliveredOrders = undeliveredOrdersResult.data;
    // 获取今日销量
    let salesTodayResult = await getSalesTodayCountService();
    data.todaySales = salesTodayResult.data;

    // 更新图表数据
    option.series[0].data = [
      data.totalOrders,
      data.todayOrders,
      data.undeliveredOrders,
      data.todaySales,
    ];

    console.log("data:", data);
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  } catch (error) {
    console.error("数据获取失败:", error);
  }
});
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-content {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  color: #409eff;
}

.el-card {
  margin-bottom: 20px;
}
</style>